<template>
  <a-list item-layout="vertical" size="large" :data-source="ebooks">
    <template #renderItem="{ item }">
      <a-list-item key="item.name">
        <a-list-item-meta :description="item.description">
          <template #title>
            <a :href="item.cover">
              <router-link :to="route.fullPath + '/' + item.id">{{
                item.name
              }}</router-link>
            </a>
          </template>
          <template #avatar><a-avatar :src="item.cover" /></template>
        </a-list-item-meta>

        <!-- 
          图标
         -->
        <template #actions>
          <div>
            <component :is="'LikeOutlined'" style="margin-right: 8px" />{{
              item.view_count
            }}
          </div>
        </template>
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup lang="ts">
import { onMounted, reactive, watch } from "vue";
import { getEbookListByPage } from "@/api/cate";
import { useRoute } from "vue-router";

const route = useRoute();
const ebooks = reactive<any[]>([]);
const params = reactive({
  page: 1,
  size: 1000,
  category2_id: 0, //路由传递过来即可  level2
});
// 获取id对应的书籍数据
const handlerQuery = () => {
  getEbookListByPage(params).then((res) => {
    if (res.data.code === 10001) {
      // 设置书籍信息
      ebooks.length = 0;
      ebooks.push(...res.data.data.list);
    }
  });
};

// 监听路由变化
watch(
  () => route.path,
  () => {
    params.category2_id = Number(route.params.level2_id);
    handlerQuery();
  }
);

onMounted(() => {
  params.category2_id = Number(route.params.level2_id);
  handlerQuery();
});
</script>

<style scope>
.ant-list-items {
  display: flex;
  flex-wrap: wrap;
}
.ant-list-item {
  min-width: 33.3%;
}
.ant-list-item-meta {
  white-space: nowrap;
  min-width: 33.3%;
}
.ant-list-item-action {
  white-space: nowrap;
}
.ant-avatar {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 8%;
  margin: 5px 0;
}
</style>
